<template>
  <div id="denglu">
    <!-- <div class="iphonetop">9.23</div> -->
    <div class="title">
      <div class="text">登录</div>
    </div>
    <div class="dl-img">
      <div class="rimg">
        <img src="../../assets/img/touxiang.jpg" alt="">
      </div>
      <!-- <div class="input">
        <input type="text" />
      </div> -->
      <van-form ref="form">
        <van-field
          v-model="username"
          name="用户名"
          clearable
          left-icon="https://b.yzcdn.cn/vant/icon-demo-1126.png"
          placeholder="用户名"
          input-align="left"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="password"
          type="password"
          left-icon="other-pay"
          right-icon="browsing-history"
          placeholder="登录密码"
          input-align="left"
          :rules="[{ required: true }]"
        />
        <!-- <van-button type="info" size="large">登录</van-button>
        <van-button color="#eee" size="large">注册</van-button> -->
      </van-form>
      <div class="a-a">
        <!-- <a href="#">验证码登录</a> <a href="#">忘记密码？</a> -->
      </div>
      <div class="check">
        <van-checkbox
          v-model="checked"
        >我已阅读并同意“ <a href="#">注册协议</a>”“
          <a href="#">隐私政策</a> ”。
        </van-checkbox>
      </div>
      <div class="dlzc">
        <van-button
          type="info"
          size="large"
          @click="getUserLogin()"
        >登录</van-button><br>
        <!-- <van-button color="#eee" size="large">注册</van-button> -->
      </div>
    </div>
    <!-- <div class="img-span">
      <span>其他登陆方式</span>
      <div class="img-wx">
        <img src="../../assets/img/微信 .png" alt="" />
      </div>
    </div> -->
  </div>
</template>

<script>
import { UserLogin } from './fetch'
import {
  Toast,
  Button,
  Cell,
  CellGroup,
  Icon,
  Image as VanImage,
  NavBar,
  Form,
  Field,
  Cascader,
  Popup,
  Picker,
  Checkbox,
  CheckboxGroup
} from 'vant'

/* import NavBarTop from "@/components/navBar.vue"; */
export default {
  name: 'Login',
  components: {
    /* NavBarTop, */
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Toast.name]: Toast,
    [Picker.name]: Picker
  },
  data() {
    return {
      username: 'admin',
      password: '123456',
      // 复选框
      checked: true
    }
  },
  methods: {
    async getUserLogin() {
      /* const res = await this.$http.getUserLogin({
        name: this.username,
        password: this.password
      })
      console.log(res)
       */
      const res = await UserLogin(this.username, this.password)
      console.log(res)
      if (res) {
        localStorage.setItem('token', res)
        this.$router.push('/home')
        return
      }
    }
  }
}
</script>

<style scoped>
#denglu {
  font-size: 0.12rem;
}
#denglu .img1 {
  height: 0.5rem;
}
.img1 img {
  /* 上右下左 */
  clip: rect(10px, 0px, 40px, 0px);
}
.iphonetop,
.title {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.16rem;
  padding: 0.08rem 0;
  border-bottom: 1px solid #eee;
}
.title .text {
  font-size: 0.12rem;
  text-align: center;
}
.dl-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* 头像 */
.rimg {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 1.4rem;
  background-color: #eee;
  margin: 0.3rem auto;
}
.rimg img {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 1.4rem;
}
.input {
  width: 3rem;
  height: 1rem;
  margin-top: 0.5rem;
  border: 0.01rem solid #eee;
  padding: 0rem 0.1rem;
}
form.van-form {
  width: 3.5rem;
  border: 0.01rem solid #eee;
}
/* 忘记密码 */
.a-a {
  width: 3rem;
  margin: 0.1rem;
  display: flex;
  justify-content: space-between;
}
.a-a a {
  font-size: 0.12rem;
  /* text-decoration: underline; */
  display: block;
  color: rgba(0, 121, 254);
}
/* 复选框  */
.check {
  margin: 0.1rem;
}
.check a {
  color: rgba(0, 121, 254);
}
.dlzc {
  width: 3rem;
}
.van-button {
  width: 3rem;
  margin: 0.1rem 0;
}
/* 其他登陆方式微信登录 */
.img-span {
  /* width: 0.5rem; */
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
}
.img-span span {
  color: gray;
  display: block;
  margin-top: 0.3rem;
}
.img-span .img-wx {
  background-color: #eee;
  width: 0.55rem;
  height: 0.55rem;
  margin: 0.1rem auto;
  border-radius: 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img-span .img-wx img {
  background-color: #eee;
  width: 0.45rem;
  height: 0.3rem;
  border-radius: 0.4rem;
}
</style>
